<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :lg="24" :xs="24" class="mb-[12px]">
        <el-card shadow="never">
          <el-calendar v-model="selectedDate">
            <template #date-cell="{ data }">
              <div
                class="date-cell"
                :class="{
                  'is-selected': data.isSelected,
                  'has-data': dateData[formatDate(data.day)] && dateData[formatDate(data.day)].courseCount > 0
                }"
                v-loading="loading"
                @click="handleDateClick(data.day)"
              >
                <!-- 显示月-日（如 01-01） -->
                <span class="date-number">{{ data.day.split('-').slice(1).join('-') }}</span>
                <!-- 显示后台返回的课程数量 -->
                <div v-if="dateData[formatDate(data.day)]" class="date-info">
                  已设置 {{ dateData[formatDate(data.day)].courseCount }} 节课
                </div>

                <!--                &lt;!&ndash; 加载中状态 &ndash;&gt;-->
                <!--                <div v-if="loading[formatDate(data.day)]" class="loading">-->
                <!--                  <el-loading-spinner size="12" />-->
                <!--                </div>-->
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import {getCourses} from "@/api/fitness";

// 定义组件名称，用于keep-alive识别
defineOptions({
  name: 'Calendar'
});

// 路由实例
const router = useRouter();

// 选中的日期（响应式）
const selectedDate = ref<Date | null>(new Date());

// 存储每个日期的后台数据（键：20250101，值：{ courseCount: number, ... }）
const dateData = ref<Record<string, { courseCount: number }>>({});

/**
 * 格式化日期为 20250101 格式
 * @param dateString - 原始日期字符串（如 "2025-01-01"）
 * @returns 无横杠的日期字符串
 */
const formatDate = (dateString: string) => {
  let s = dateString.replace(/-/g, '');
  return s;
};

/**
 * 解析日期字符串为年月日
 * @param dateString - 原始日期字符串（如 "2025-01-01"）
 * @returns { year, month, day }
 */
const parseDate = (dateString: string) => {
  const [year, month, day] = dateString.split('-');
  return {year, month, day};
};
//loading
const loading = ref(false);
/**
 * 初始化当月所有日期的数据（批量查询优化）
 */
const initCurrentMonthData = async () => {
  loading.value = true;
  const currentDate = selectedDate.value || new Date();
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth() + 1; // 月份从0开始，需+1

  try {
    // 调用批量查询接口（实际项目中替换为真实接口）
    getCourses(year, month).then((data) => {
      console.log("formattedData", data)
      // 使用 reduce 方法转换为映射
      const map = data.reduce((acc, item) => {
        // 将 Date 转换为字符串作为键，Count 作为值
        acc[item.Date.toString()] = {courseCount: item.Count};
        return acc;
      }, {});

      console.log(map);
      dateData.value = map;
    })
  } catch (error) {
    ElMessage.warning('批量加载数据失败，将自动单个加载');
    console.error('批量请求错误：', error);
  }finally {
    loading.value = false;
  }
};

/**
 * 日期点击事件处理
 * @param dateString - 原始日期字符串（如 "2025-01-01"）
 */
const handleDateClick = (dateString: string) => {
  const {year, month, day} = parseDate(dateString);
  // 导航到详情页
  router.push({
    name: 'FitnessDetail',
    params: {year, month, day}
  });
};

// 组件挂载时初始化数据
onMounted(() => {
  // 加载当前月的数据
  initCurrentMonthData();
});

// 监听选中日期变化，自动加载数据
watch(selectedDate, (newVal) => {
  if (newVal) {

  }
});
</script>

<style scoped>
.date-cell {
  height: 100%;
  min-height: 60px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.2s;
}

/* 选中日期样式 */
.date-cell.is-selected {
  background-color: rgba(64, 158, 255, 0.15);
  font-weight: bold;
}

/* 有数据的日期样式 */
.date-cell.has-data {
  color: #409eff; /* 高亮颜色 */
}

/* 日期数字样式 */
.date-number {
  font-size: 14px;
  margin-bottom: 4px;
}

/* 数据信息样式 */
.date-info {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* 鼠标悬停效果 */
.date-cell:hover {
  background-color: #f5f7fa;
}
</style>
